import QtQuick
import QtQuick.Controls

Item {
    id: root

    property string source: ""
    property int sourceWidth: 10
    property int sourceHeight: 10
    property int spacing: 5

    property int textWidth: 10
    property int textHeight: 10
    property string text: ""
    property int fontPixelSize: 10
    property color textColor: "#FFFFFF"

    signal pressed
    signal released
    signal clicked

    Column {                          // 垂直布局容器，子项从上到下排列
        anchors.fill: parent           // 让 Column 填满父项
        spacing: root.spacing          // 子项之间的间距，取自 root 的 spacing 属性

        Button {                       // 按钮控件
            anchors.horizontalCenter: parent.horizontalCenter  // 水平居中
            hoverEnabled: false        // 关闭鼠标悬停高亮效果

            background: Image {        // 自定义按钮的背景为一张图片
                width: sourceWidth     // 使用图片本身的宽度
                height: sourceHeight   // 使用图片本身的高度
                anchors.centerIn: parent   // 图片居中显示
                source: root.source    // 图片路径来源于 root 的 source 属性
                fillMode: Image.PreserveAspectFit  // 保持宽高比缩放
                opacity: parent.down ? 0.6 : 1     // 如果按钮按下，降低透明度
            }

            // 按钮事件绑定到 root 的信号/方法
            onPressed: root.pressed()
            onReleased: root.released()
            onClicked: root.clicked()
        }

        Label {                        // 按钮下方的文字标签
            id: voiceTipsLabel
            width: root.textWidth      // 标签宽度取自 root 的 textWidth
            height: root.textHeight    // 标签高度取自 root 的 textHeight
            anchors.horizontalCenter: parent.horizontalCenter  // 标签水平居中
            horizontalAlignment: Text.AlignHCenter // 文本水平居中
            verticalAlignment: Text.AlignVCenter   // 文本垂直居中
            text: root.text            // 显示的文字来源于 root 的 text
            color: textColor           // 字体颜色
            font.pixelSize: fontPixelSize // 字体大小（像素）
        }
    }


}
